{% extends 'base.html' %}
{% block content-wrapper %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/index_style.css' %}">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="d-flex justify-content-between flex-wrap">
                    <div class="d-flex align-items-end flex-wrap">
                        <div class="mr-md-3 mr-xl-5">
                            <h2>Welcome back,</h2>
                            <p class="mb-md-0">基于Python的B站热门视频分析与可视化</p>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-end flex-wrap">
                        <button class="btn btn-primary mt-2 mt-xl-0">
                            <i class="mdi mdi-flattr spin-icon" style="display: none;"></i>
                            刷新数据
                        </button>
                    </div>
                    <script src="{% static 'js/jquery.min.js' %}"></script>
                    <input type="hidden" id="csrfTokenInput" value="{{ csrf_token }}">
                    <script>
                        // 获取按钮元素
                        const downloadButton = document.querySelector('.btn.btn-primary');
                        // 获取图标元素
                        const spinIcon = document.querySelector('.spin-icon');

                        // 为按钮添加点击事件监听器
                        downloadButton.addEventListener('click', function() {
                            // 显示图标
                            spinIcon.style.display = 'inline-block';

                            // 假设 inputValue 有值，这里先简单赋值，实际需要根据情况修改
                            let inputValue = 'your_bv_value';

                            // 获取 CSRF 令牌
                            var csrftoken = $('#csrfTokenInput').val();

                            $.ajax({
                                url: 'spider',
                                type: 'GET',
                                contentType: 'application/json',
                                headers: {
                                    'X-CSRFToken': csrftoken
                                },
                                success: function (response) {
                                    if (response['code'] === 200) {
                                        window.location.href = '';
                                    } else {
                                        alert('爬虫出错：' + JSON.stringify(response));
                                    }
                                    // 请求成功后隐藏图标
                                    spinIcon.style.display = 'none';
                                },
                                error: function (error) {
                                    alert('请求出错：' + JSON.stringify(error));
                                    console.log(error);
                                    // 请求出错后隐藏图标
                                    spinIcon.style.display = 'none';
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body dashboard-tabs p-0">
                        <ul class="nav nav-tabs px-4" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
                            </li>
                        </ul>
                        <div class="tab-content py-0 px-0">
                            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                                <div class="d-flex flex-wrap justify-content-xl-between">
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <i class="mdi mdi-eye mr-3 icon-lg text-success"></i>
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">爬取视频总数</small>
                                            <h5 class="mr-2 mb-0">{{ product_number }}</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <i class="mdi mdi-flag mr-3 icon-lg text-danger"></i>
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">总弹幕数</small>
                                            <h5 class="mr-2 mb-0">{{ comment_number }}</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <img src="{% static 'images/null.png' %}" alt="" width="38px" height="38px" style="margin-right: 10px">
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">作者数</small>
                                            <h5 class="mr-2 mb-0">{{ author_number }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-7 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">各分类分区 TOP-1 播放量折线图</p>
                        <p class="mb-4">从图可见，分区 {{ top1 }} 的播放量最高！</p>
                        <div id="cash-deposits-chart-legend" class="d-flex justify-content-center pt-3">
                            {{ line1_html|safe }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Pie chart</p>
                        <h1>前 top-18 各分区饼状图占比</h1>
                        <h4>数据动态生成，每次爬取动态更新</h4>
                        <p class="text-muted">越来越多的用户涌向B站，让我们看看分区占比再去发视频吧。</p>
                        <div id="total-sales-chart-legend">
                            {{ pie_html|safe }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">前20展示</p>
                        <div class="table-responsive">
                            <table id="recent-purchases-listing" class="table">
                                <thead>
                                <tr>
                                    <th>视频标题</th>
                                    <th>BVID</th>
                                    <th>播放数</th>
                                    <th>点赞数</th>
                                    <th>投币数</th>
                                    <th>URL</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for product in products_top20 %}
                                    <tr>
                                        <td>{{ product.title }}</td>
                                        <td>{{ product.BVID }}</td>
                                        <td>{{ product.play_cnt_list }}</td>
                                        <td>{{ product.like_cnt_list }}</td>
                                        <td>{{ product.coin_cnt_list }}</td>
                                        <td><a href="{{ product.video_url }}">{{ product.video_url }}</a></td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}